<template>
	<view class="container">
		<view class="content">
			<!-- 新增：全局单个空状态（所有订单为空时显示） -->
			<view class="global-empty-tip" v-if="isAllOrderEmpty">
				<image :src="`${$ImgBaseUrl}noOrder-icon.png`" class="empty-icon" />
				<text class="empty-text">暂无订单</text>
			</view>
			<!-- 今日待确认单数 堆叠 -->
			<view class="all-Tobeconfirmed-container" v-if="idleOrder.length > 0">
				<!-- idleOrder有数据时显示 -->
				<!-- 实际卡片 -->
				<view class="all-Tobeconfirmed" @click='goOrderDetails(item)' v-for="(item,index) in idleOrder"
					:key="index">
					<view class="service-time-box">
						<view class="service-time">
							<image :src="`${$ImgBaseUrl}service-order-time.png`" class="icon1" />
							<text class='time'>{{item.createTime}}</text>
						</view>
						<!-- 待确认等于待接单 -->
						<text class="order-confirm"
							v-if="item.serviceStatus==='SERVICE_WAIT'">{{item.serviceStatusName}}</text>
						<!-- 已接单等于待预约 -->
						<text class="order-state"
							v-if="item.serviceStatus==='SERVICE_RECEIVED'">{{item.serviceStatusName}}</text>
						<!-- 已预约等于待服务-->
						<text class="order-state-service-advance"
							v-if="item.serviceStatus==='SERVICE_ADVANCE'">{{item.serviceStatusName}}</text>

						<!-- 服务中 -->
						<text class="order-state-service-ing"
							v-if="item.serviceStatus==='SERVICE_ING'">{{item.serviceStatusName}}</text>
						<!-- 服务完成 -->
						<text class="order-state-service-end"
							v-if='item.serviceStatus==="SERVICE_END"'>{{item.serviceStatusName}}</text>
					</view>
					<view class="service-time-box">
						<view class="service-project">
							<image :src="`${$ImgBaseUrl}service-orider-poject.png`" class="icon2" />
							<text class='time'>{{item.title}}</text>
						</view>
					</view>
					<view class="service-time-box">
						<view class="service-position">
							<image :src="`${$ImgBaseUrl}service-orider-positon.png`" class="icon3" />
							<text class='time'>{{item.address}}</text>
						</view>
					</view>
					<view class="service-time-box">
						<view class="price">
							<text>{{item.actualAmount}}</text> <!-- 添加货币符号 -->
						</view>
						<!-- 待确认等于待接单 -->
						<view class="button-box" v-if="item.serviceStatus==='SERVICE_WAIT'">
							<button type="default" class='refuse-btn' @click.stop="handleRefuse(item)">拒绝</button>
							<button type="default" class='Receivingorders-btn'
								@click.stop="handleAccept(item)">接单</button>
						</view>
						<!-- 已接单等于待预约 -->
						<view class="PendingAppointmentbutton-box" v-if="item.serviceStatus==='SERVICE_RECEIVED'">
							<button type="default" class='PendingAppointment-refuse-btn'
								@click.stop="handleAppointment(item.id)">去预约</button>

						</view>
						<!-- 待服务SERVICE_ADVANCE -->
						<view class="service-watt-button-box" v-if="item.serviceStatus==='SERVICE_ADVANCE'">
							<button type="default" class='viewPosition-btn'
								@click.stop="handleViewPosition(item)">查看定位</button>
							<button type="default" class='contactCustomers-btn'
								@click.stop="handleContactCustomer(item.customerPhone);">联系客户</button>
						</view>
						<!-- 服务中 -->
						<view class="service-ing-button-box" v-if="item.serviceStatus==='SERVICE_ING'">
							<button type="default" class='service-ing-btn'>查看定位</button>

						</view>

						<!-- 服务完成 不显示按钮-->
						<view class="service-watt-button-box" v-if='item.serviceStatus==="SERVICE_END"'>
						</view>

					</view>
				</view>
				<!-- 空状态卡片（idleOrder无数据时显示） -->
				<!-- <view class="NoneDate" v-if="idleOrder.length === 0">
					<text>暂无订单</text>
				</view> -->

			</view>

			<!-- 今日服务单数 折叠展开-->
			<view class="collapse-panel" v-if="todayOrders.length > 0">
				<view class="collapse-header" @click="toggleCollapse" :style="bgStyle">
					<view class="collapse-title-box">
						<text class='title-text'>今日服务 <text class='title-num'>{{todayOrders.length}}</text> 单</text>
						<text class='title-text2'>预收入 <text class='title-price'>¥{{expectedAmount}}</text> </text>
					</view>
					<view class="collapse-icons">
						<text class='collapse-state'>{{ isCollapsed ? '展开' : '收起' }}</text>
						<uni-icons v-if="isCollapsed" type="down" size="15" color='#999'></uni-icons>
						<uni-icons v-else type="up" size="15" color='#999'></uni-icons>
					</view>
				</view>
				<view class="collapse-content" v-if="!isCollapsed">
					<!-- 当没有数据时，显示提示文本 -->
					<!-- <view v-if="todayOrders.length === 0" class="empty-tip">
						<text>今日暂无订单</text>
					</view> -->
					<view v-for="(item,index) in todayOrders" :key="index" class='content-box'>
						<!-- 这里放置需要折叠的内容 -->
						<view class="order-map">
							<!-- 地图容器 -->
							<map id="map" :latitude="center.latitude" :longitude="center.longitude" :scale="15"
								class="map-container" show-location :enable-scroll="true" :markers="[{
							      id: index,  // 唯一标识，必填
							      latitude: Number(item.lat),
							      longitude: Number(item.lng),
							      width: 35,  // 标记点宽度（rpx）
							      height: 37,  // 标记点高度（rpx）
								   iconPath: `${$ImgBaseUrl}positon-icon.png` 
							    }]" />
						</view>
						<view class="order-info" @click='goOrderDetails(item)'>
							<view class="order-time-box">
								<view class="order-time">
									<image :src="`${$ImgBaseUrl}service-order-time.png`" class='icon1'></image>
									<text class='time'>{{item.createTime}}</text>
								</view>
								<!-- 待确认等于待接单 -->
								<text class="order-confirm"
									v-if="item.serviceStatus==='SERVICE_WAIT'">{{item.serviceStatusName}}</text>
								<!-- 已接单等于待预约 -->
								<text class="order-state"
									v-if="item.serviceStatus==='SERVICE_RECEIVED'">{{item.serviceStatusName}}</text>
								<!-- 已预约等于待服务-->
								<text class="order-state-service-advance"
									v-if="item.serviceStatus==='SERVICE_ADVANCE'">{{item.serviceStatusName}}</text>

								<!-- 服务中 -->
								<text class="order-state-service-ing"
									v-if="item.serviceStatus==='SERVICE_ING'">{{item.serviceStatusName}}</text>
								<!-- 服务完成 -->
								<text class="order-state-service-end"
									v-if='item.serviceStatus==="SERVICE_END"'>{{item.serviceStatusName}}</text>

							</view>
							<view class="order-time-box">
								<view class="order-project">
									<image :src="`${$ImgBaseUrl}service-orider-poject.png`" class='icon2'></image>
									<text class='time'>{{item.title}}</text>
								</view>
							</view>

							<view class="order-time-box">
								<view class="order-position">
									<image :src="`${$ImgBaseUrl}service-orider-positon.png`" class='icon3'></image>
									<text class='time'>{{item.address}}</text>
								</view>
							</view>
							<view class="order-time-box">
								<view class="price">
									<text>{{item.actualAmount}}</text>
								</view>
								<!-- 待确认等于待接单 -->
								<view class="button-box" v-if="item.serviceStatus==='SERVICE_WAIT'">
									<button type="default" class='refuse-btn'
										@click.stop="handleRefuse(item)">拒绝</button>
									<button type="default" class='Receivingorders-btn'
										@click.stop="handleAccept(item)">接单</button>
								</view>
								<!-- 已接单等于待预约 -->
								<view class="PendingAppointmentbutton-box"
									v-if="item.serviceStatus==='SERVICE_RECEIVED'">
									<button type="default" class='PendingAppointment-refuse-btn'
										@click.stop="handleAppointment(item.id)">去预约</button>

								</view>
								<!-- 待服务SERVICE_ADVANCE -->
								<view class="service-watt-button-box" v-if="item.serviceStatus==='SERVICE_ADVANCE'">
									<button type="default" class='viewPosition-btn'
										@click.stop="handleViewPosition(item)">查看定位</button>
									<button type="default" class='contactCustomers-btn'
										@click.stop="handleContactCustomer(item.customerPhone)">联系客户</button>
								</view>
								<!-- 服务中 -->
								<view class="service-ing-button-box" v-if="item.serviceStatus==='SERVICE_ING'">
									<button type="default" class='service-ing-btn'>查看定位</button>

								</view>

								<!-- 服务完成 不显示按钮-->
								<view class="service-watt-button-box" v-if='item.serviceStatus==="SERVICE_END"'>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 排期 -->
			<view class="collapse-panel2" v-if="futureOrders.length > 0">
				<view class="collapse-header" @click="toggleCollapse2">
					<view class="collapse-title-box">
						<text class='title-text'>已排期 <text class='title-num'>{{futureOrders.length}}</text> 单</text>
						<text class='title-text2'>预收入 <text class='title-price'>¥{{futureExpectedAmount}}</text> </text>
					</view>
					<view class="collapse-icons">
						<text class='collapse-state'>{{ isCollapsed2 ? '展开' : '收起' }}</text>
						<uni-icons v-if="isCollapsed2" type="down" size="15" color='#999'></uni-icons>
						<uni-icons v-else type="up" size="15" color='#999'></uni-icons>
					</view>
				</view>

				<!-- 折叠内容区域（仅控制展开/收起，不参与循环） -->
				<view class="collapse-content" v-if="!isCollapsed2">
					<!-- 空状态提示（与循环平级，无数据时显示） -->
					<!-- <view v-if="futureOrders.length === 0" class="empty-tip">
						<text>暂无排期订单</text>
					</view> -->

					<!-- 循环渲染订单列表（有数据时显示） -->
					<view v-for="(item,index) in futureOrders" :key="index" class='content-box'>
						<view class="order-map">
							<map id="map" :latitude="center.latitude" :longitude="center.longitude" :scale="15"
								class="map-container" show-location :enable-scroll="true" :markers="[{
													      id: index,  // 唯一标识，必填
													      latitude: Number(item.lat),
													      longitude: Number(item.lng),
													      width: 35,  // 标记点宽度（rpx）
													      height: 37,  // 标记点高度（rpx）
														   iconPath: `${$ImgBaseUrl}positon-icon.png` 
													    }]" />
						</view>
						<view class="order-info" @click='goOrderDetails(item)'>
							<view class="order-time-box">
								<view class="order-time">
									<image :src="`${$ImgBaseUrl}service-order-time.png`" class='icon1'></image>
									<text class='time'>{{item.createTime}}</text>
								</view>
								<!-- 待确认等于待接单 -->
								<text class="order-confirm"
									v-if="item.serviceStatus==='SERVICE_WAIT'">{{item.serviceStatusName}}</text>
								<!-- 已接单等于待预约 -->
								<text class="order-state"
									v-if="item.serviceStatus==='SERVICE_RECEIVED'">{{item.serviceStatusName}}</text>
								<!-- 已预约等于待服务-->
								<text class="order-state-service-advance"
									v-if="item.serviceStatus==='SERVICE_ADVANCE'">{{item.serviceStatusName}}</text>

								<!-- 服务中 -->
								<text class="order-state-service-ing"
									v-if="item.serviceStatus==='SERVICE_ING'">{{item.serviceStatusName}}</text>
								<!-- 服务完成 -->
								<text class="order-state-service-end"
									v-if='item.serviceStatus==="SERVICE_END"'>{{item.serviceStatusName}}</text>
							</view>
							<view class="order-time-box">
								<view class="order-project">
									<image :src="`${$ImgBaseUrl}service-orider-poject.png`" class='icon2'></image>
									<text class='time'>{{item.title}}</text>
								</view>
							</view>
							<view class="order-time-box">
								<view class="order-position">
									<image :src="`${$ImgBaseUrl}service-orider-positon.png`" class='icon3'></image>
									<text class='time'>{{item.address}}</text>
								</view>
							</view>
							<view class="order-time-box">
								<view class="price">
									<text>{{item.actualAmount}}</text>
								</view>
								<!-- 待确认等于待接单 -->
								<view class="button-box" v-if="item.serviceStatus==='SERVICE_WAIT'">
									<button type="default" class='refuse-btn'
										@click.stop="handleRefuse(item)">拒绝</button>
									<button type="default" class='Receivingorders-btn'
										@click.stop="handleAccept(item)">接单</button>
								</view>
								<!-- 已接单等于待预约 -->
								<view class="PendingAppointmentbutton-box"
									v-if="item.serviceStatus==='SERVICE_RECEIVED'">
									<button type="default" class='PendingAppointment-refuse-btn'
										@click.stop="handleAppointment(item.id)">去预约</button>

								</view>
								<!-- 待服务SERVICE_ADVANCE -->
								<view class="service-watt-button-box" v-if="item.serviceStatus==='SERVICE_ADVANCE'">
									<button type="default" class='viewPosition-btn'
										@click.stop="handleViewPosition(item)">查看定位</button>
									<button type="default" class='contactCustomers-btn'
										@click.stop="handleContactCustomer(item.customerPhone)">联系客户</button>
								</view>
								<!-- 服务中 -->
								<view class="service-ing-button-box" v-if="item.serviceStatus==='SERVICE_ING'">
									<button type="default" class='service-ing-btn'>查看定位</button>

								</view>

								<!-- 服务完成 不显示按钮-->
								<view class="service-watt-button-box" v-if='item.serviceStatus==="SERVICE_END"'>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<CallDialog :showDialog="showCallDialog" :phoneNumber="phoneNumber" @close="showCallDialog = false">
		</CallDialog>
	</view>
</template>

<script setup>
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import CallDialog from '@/components/CallDialog.vue'
	import {
		ref,
		onMounted,
		computed,
		watch
	} from 'vue'
	import {
		defineProps
	} from 'vue' // 引入defineProps
	import {
		advanceOrder,
		receiveOrder
	} from '@/api/serviceOrder.js'
	const showCallDialog = ref(false)
	const phoneNumber = ref(''); // 初始默认号码
	// 排期订单
	const futureOrders = ref([])
	// 今日订单
	const todayOrders = ref([])
	// 待接订单
	const idleOrder = ref([])


	// 新增：定义emit用于向父组件传递事件
	const emit = defineEmits(['refreshOrderList']) // 新增事件：通知父组件刷新列表
	// 1. 接收父组件传递的orderList数据
	const props = defineProps({
		orderList: {
			type: Array,
			default: () => [] // 默认空数组，避免未传递时出错
		}
	})
	// console.log('服务者订单列表首页', props.orderList);
	// 新增：判断所有订单数据是否为空
	const isAllOrderEmpty = computed(() => {
		// 待接订单、今日订单、排期订单均为空时，返回true（显示单个空状态）
		return (
			idleOrder.value.length === 0 &&
			todayOrders.value.length === 0 &&
			futureOrders.value.length === 0
		)
	})

	const isCollapsed = ref(true);
	const toggleCollapse = () => {
		isCollapsed.value = !isCollapsed.value;
	};
	const isCollapsed2 = ref(true);
	const toggleCollapse2 = () => {
		isCollapsed2.value = !isCollapsed2.value;
	};
	// 坐标数据
	const center = ref({
		latitude: '',
		longitude: ''
	});

	const bgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}service-order-bg.png)`,
		backgroundSize: '100% 100%', // 添加背景大小属性

	}));
	// 计算今日订单预收入总和（核心逻辑）
	const expectedAmount = computed(() => {
		// 遍历todayOrders，累加每个订单的expectedAmount
		return todayOrders.value.reduce((total, item) => {
			// 确保金额为数字（避免字符串拼接）
			return total + Number(item.expectedAmount || 0);
		}, 0).toFixed(2); // 保留两位小数，符合金额格式
	});

	// 计算排期订单预收入总和
	const futureExpectedAmount = computed(() => {
		return futureOrders.value.reduce((total, item) => {
			return total + Number(item.expectedAmount || 0);
		}, 0).toFixed(2);
	});

	// 跳转到订单详情页
	const goOrderDetails = ((item) => {
		console.log('对应的订单ID:', item.id);
		// 如果是已完成的订单状态跳转到对应的已完成订单详情页
		if (item.serviceStatus === 'SERVICE_END') {
			uni.navigateTo({
				url: `/pages/order/ServiceOrder/ServiceOrderDetailComplete?id=${item.id}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/order/ServiceOrder/ServiceOrderDetail?id=${item.id}`
			});
		}
	})

	// 处理各个按钮点击事件
	const handleRefuse = (item) => {
		console.log('拒绝订单');
		// 拒绝订单逻辑
		const params = {
			serviceStatus: item.serviceStatus,
			orderId: item.id
		}
		receiveOrder(params).then((res) => {
			console.log('接单接口成功', res);
			// 接口成功后，触发事件通知父组件刷新订单列表
			// emit('refreshOrderList'); // 关键：通知父组件调用ServiceOrderList
			if (res.code === 200) {
				uni.showToast({
					title: res.msg,
				});
				emit('refreshOrderList')
			}
		}).catch(err => {
			console.error('接单接口失败', err);
		})
	};

	const handleAccept = (item) => {
		const params = {
			serviceStatus: 'SERVICE_RECEIVED',
			orderId: item.id
		}
		receiveOrder(params).then((res) => {
			console.log('接单接口成功', res);
			// 接口成功后，触发事件通知父组件刷新订单列表
			// emit('refreshOrderList'); // 关键：通知父组件调用ServiceOrderList
			if (res.code === 200) {
				uni.showToast({
					title: res.msg,
				});
				emit('refreshOrderList')
			}
		}).catch(err => {
			console.error('接单接口失败', err);
		})
	};

	const handleAppointment = (id) => {
		console.log('去预约', id);
		const params = {
			orderId: id
		}
		// 预约接口调用
		advanceOrder(params).then((res) => {
			console.log('预约接口成功', res);
			// 接口成功后，触发事件通知父组件刷新订单列表
			if (res.code === 200) {
				uni.showToast({
					title: res.msg,
				});
			}
			emit('refreshOrderList'); // 关键：通知父组件调用ServiceOrderList
		}).catch(err => {
			console.error('预约接口失败', err);
		})
	};


	const handleViewPosition = (item) => {
		console.log('查看定位');
		// 查看定位跳转到详情页
		uni.navigateTo({
			url: `/pages/order/ServiceOrder/ServiceOrderDetail?id=${item.id}`
		});
	};

	// 在父组件中
	const handleContactCustomer = async (customerPhone) => {
		showCallDialog.value = true
		// 假设订单数据中有 customerPhone 字段
		phoneNumber.value = customerPhone; // 设置默认号码

		console.log('准备联系客户:', phoneNumber.value);
	}

	// 跳转到订单详情已完成页面
	// const goOrderDetails = ((item) => {
	// 	console.log('对应的订单ID:', item);
	// 	uni.navigateTo({
	// 		url: `/pages/order/ServiceOrder/ServiceOrderDetailComplete?id=${item.id}`
	// 	});
	// })
	const getLocation = async () => {
		try {
			await uni.authorize({
				scope: "scope.userLocation",
				fail: () => {
					uni.showModal({
						title: "提示",
						content: "需要位置权限才能使用地图功能",
						confirmText: "去设置",
						success: (res) => {
							if (res.confirm) uni.openSetting();
						},
					});
					throw new Error("用户拒绝授权");
				},
			});

			const res = await new Promise((resolve, reject) => {
				uni.getLocation({
					type: "gcj02",
					success: resolve,
					fail: reject,
				});
			});

			center.value = {
				latitude: res.latitude,
				longitude: res.longitude,
			};
			return res;
		} catch (err) {
			console.warn("获取位置失败:", err);
			return center.value;
		}
	};
	watch(
		() => props.orderList,
		(newVal) => {
			console.log('数据更新后的orderList', newVal)
			futureOrders.value = newVal.futureOrders
			console.log('排期订单', futureOrders.value);
			todayOrders.value = newVal.todayOrders
			console.log('今日订单', todayOrders.value);
			idleOrder.value = newVal.idleOrder
		}, {
			deep: true
		} // 深度监听数组内部变化
	)
	onMounted(async () => {
		const location = await getLocation();
	})
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(180deg, #CBE1FF 0%, #F5F5F5 100%);
		// height: 100vh;
		// height: 500rpx;
		// width: 100%;
		padding-top: 0rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.content {
			height: 100%;
			display: flex;
			flex-direction: column;
			/* 子元素垂直排列（保持原有模块顺序） */
			min-height: calc(100vh - 40rpx);

			.all-Tobeconfirmed-container {
				position: relative;
				padding: 20rpx 0;
				margin-bottom: 20rpx;

				.stack-card-ghost {
					position: absolute;
					left: 5%;
					width: 90%;
					height: 303rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 0.62);
					z-index: 2;
					transform: translateY(-278rpx);
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

					&:nth-child(3) {
						z-index: 1;
						transform: translateX(38rpx) translateY(-257rpx);
						/* 合并两个平移变换 */
						opacity: 0.4;
						width: 80%;
						height: 303rpx;
					}
				}

				// 堆叠样式
				.all-Tobeconfirmed {
					position: relative;
					z-index: 3;
					width: 100%;
					height: 303rpx;
					border-radius: 20rpx;
					background-color: #fff;
					padding: 25rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);



					.service-time-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;


						.service-time {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.time {
								font-size: 30rpx;
								color: #333333;
							}
						}

						.service-project {
							display: flex;
							align-items: center;
							justify-content: space-between;



							.time {
								font-size: 30rpx;
								color: #333333;
							}
						}

						.service-position {
							display: flex;
							align-items: center;
							justify-content: space-between;


							.time {
								font-size: 30rpx;
								color: #333333;
							}
						}

						.price {
							font-size: 40rpx;
							color: #FF6A47;
							font-weight: 500;
							position: relative;
							padding-left: 10px;
						}

						.price::before {
							content: "￥";
							position: absolute;
							left: -2px;
							bottom: 20rpx;
							/* 调整垂直位置 */
							font-size: 20rpx;
							/* 调整符号大小 */
							transform: translateY(50%);
							/* 微调垂直位置 */
						}


					}
				}
			}

			// 折叠面板样式
			.collapse-panel {
				border-radius: 30rpx;
				overflow: hidden;
				margin-top: 60rpx;

				.collapse-header {
					background-repeat: no-repeat;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					font-size: 32rpx;
					color: #333;
					border-radius: 20rpx;
					// background-color: #f8f8f8;
					cursor: pointer;
					flex-direction: column;

					.collapse-icons {
						display: flex;
						align-items: center;

						.collapse-state {
							font-weight: 400;
							font-size: 24rpx;
							color: #999;
							margin-right: 10rpx;
						}
					}

					.collapse-title-box {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.title-text {
							font-size: 28rpx;
							font-weight: 400;
							color: #094596;

							.title-num {
								color: #FF6A47;
								font-size: 40rpx;
								font-weight: bold;

							}
						}

						.title-text2 {
							font-size: 28rpx;
							color: #094596;
							font-weight: 400;

							.title-price {
								font-size: 32rpx;
								font-weight: bold;
								color: #094596;
							}

						}
					}

				}

				.collapse-content {
					margin-top: 20rpx;

					.order-map {
						// height: 222rpx;

						.map-container {
							width: 100%;
							// height: 100vh;
						}
					}

					.order-info {
						background-color: #fff;
						padding: 20rpx;
						box-sizing: border-box;
						height: 300rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						border-bottom-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;

						.order-time-box {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.order-project {
								// width: 160rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.price {
								font-size: 40rpx;
								color: #FF6A47;
								font-weight: 500;
								position: relative;
								padding-left: 10px;
							}

							.price::before {
								content: "￥";
								position: absolute;
								left: -2px;
								bottom: 20rpx;
								/* 调整垂直位置 */
								font-size: 20rpx;
								/* 调整符号大小 */
								transform: translateY(50%);
								/* 微调垂直位置 */
							}

							.order-position {
								// width: 480rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.order-time {
								// width: 250rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.time {
									font-size: 30rpx;
									color: #333333;
								}

							}

						}
					}

				}
			}

			// 折叠面板样式 排期
			.collapse-panel2 {
				border-radius: 30rpx;
				overflow: hidden;
				margin-top: 40rpx;

				.collapse-header {

					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					font-size: 32rpx;
					color: #333;
					border-radius: 20rpx;
					cursor: pointer;
					flex-direction: column;
					background: linear-gradient(180deg, #FFD4CA 0%, #FFEDEA 100%);
					box-shadow: inset 0rpx 1rpx 0rpx 0rpx #FFFFFF;

					.collapse-icons {
						display: flex;
						align-items: center;

						.collapse-state {
							font-weight: 400;
							font-size: 24rpx;
							color: #999;
							margin-right: 10rpx;
						}
					}

					.collapse-title-box {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.title-text {
							font-size: 28rpx;
							font-weight: 400;
							color: #C42E0B;

							.title-num {
								color: #C42E0B;
								font-size: 40rpx;
								font-weight: bold;

							}
						}

						.title-text2 {
							font-size: 28rpx;
							color: #C42E0B;
							font-weight: 400;

							.title-price {
								font-size: 32rpx;
								font-weight: bold;
								color: #C42E0B;
							}

						}
					}

				}

				.collapse-content {
					margin-top: 20rpx;

					.order-map {

						// height: 222rpx;
						.map-container {
							width: 100%;
							// height: 100vh;
						}
					}

					.order-info {
						background-color: #fff;
						padding: 20rpx;
						box-sizing: border-box;
						height: 300rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						border-bottom-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;

						.order-time-box {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.order-project {
								// width: 160rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.price {
								font-size: 40rpx;
								color: #FF6A47;
								font-weight: 500;
								position: relative;
								padding-left: 10px;
							}

							.price::before {
								content: "￥";
								position: absolute;
								left: -2px;
								bottom: 20rpx;
								/* 调整垂直位置 */
								font-size: 20rpx;
								/* 调整符号大小 */
								transform: translateY(50%);
								/* 微调垂直位置 */
							}

							.order-position {
								// width: 480rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.order-time {
								// min-width: 250rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.time {
									font-size: 30rpx;
									color: #333333;
								}

							}

						}
					}

				}
			}
		}
	}

	.icon1 {
		width: 26rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}

	.icon2 {
		width: 23rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.icon3 {
		width: 22rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.button-box {
		display: flex;
		justify-content: space-between;
		width: 370rpx;

		.refuse-btn {
			width: 160rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 1rpx solid #FF6A47;
			color: #EB4747;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
		}

		.Receivingorders-btn {
			width: 160rpx;
			height: 56rpx;
			background: #2F80ED;
			border-radius: 28rpx;
			color: #fff;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
		}
	}

	.service-watt-button-box {
		display: flex;
		justify-content: space-between;
		width: 370rpx;

		.viewPosition-btn {
			width: 160rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 1rpx solid #999999;
			color: #333333;
			font-size: 24rpx;
			background-color: transparent;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.contactCustomers-btn {
			width: 160rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 1rpx solid #999999;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
			background-color: transparent;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.service-ing-button-box {
		display: flex;
		justify-content: space-between;
		width: 170rpx;

		.service-ing-btn {
			width: 160rpx;
			height: 56rpx;
			border: 1rpx solid #999999;
			border-radius: 28rpx;
			// color: #fff;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
			background-color: transparent;

		}
	}

	.PendingAppointmentbutton-box {
		display: flex;
		justify-content: space-between;
		width: 170rpx;

		.PendingAppointment-refuse-btn {
			width: 160rpx;
			height: 56rpx;
			border-radius: 28rpx;
			color: #fff;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
			background: #2F80ED;
		}
	}

	.order-state {
		font-size: 34rpx;
		font-weight: 500;
		color: #FF6A47;
		font-style: normal;
	}

	.order-state-service-ing {
		font-size: 34rpx;
		font-weight: 500;
		color: #6BC98D;
		font-style: normal;
	}


	.order-state-service-advance {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		font-style: normal;
	}

	.order-state-service-end {
		font-size: 34rpx;
		font-weight: 500;
		color: #666666;
		font-style: normal;
	}

	.order-confirm {
		font-size: 34rpx;
		font-weight: 500;
		color: #2F80ED;
		font-style: normal;
	}

	.content-box {
		margin-bottom: 30rpx;
	}

	.empty-tip {
		display: flex;
		justify-content: center;
	}

	.NoneDate {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 找到原有 .global-empty-tip 样式，替换为以下代码
	.global-empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 460rpx;

		.empty-text {
			font-weight: 400;
			/* 可选：添加背景或内边距，提升视觉效果 */
			padding: 20rpx 40rpx;
			border-radius: 10rpx;
			color: #333;
			font-size: 28rpx;
		}

		.empty-icon {
			width: 200rpx;
			height: 183rpx;
			margin-bottom: 20rpx;
		}
	}
</style>